<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Apez | Documentation</title>
	<link rel="icon" type="image/x-icon" href="images/favicon.png">
	
	<link rel="stylesheet" href="css/prism.css" />
	<!-- Custom Stylesheet -->
	<link rel="stylesheet" href="css/style.css" />
	<style>.style-none {list-style: none;}</style>
</head>
<body>
	
	<!-- Main Container -->
	<div id="main-wrapper">
		<!-- Menu Wrapper -->
		<div class="menu-wrapper menu-wrapper-white">
			<div class="menu">
				<!-- Logo Container -->
				<div id="logo">
					<div class="tbl-cell logo-icon">
						<a href="#"><img src="images/icon.png" alt=""></a>
					</div>
					<div class="tbl-cell logo">
						<a href="#"><img src="images/logo.png"></a>
					</div>
				</div>
				<!-- Menu Container -->
				<ul>
					<li>
						<a href="#introduction" class="active"><i class="icon-info"></i><span>Introduction</span></a>
					</li>
					<li>
						<a href="#installation"><i class="ti-ruler-pencil"></i><span>Installation</span></a>
					</li>
					<li>
						<a href="#general-information"><i class="ti-desktop"></i><span>General Information</span></a>
					</li>
					<li>
						<a href="#file-strucutre"><i class="ti-files"></i><span>File Strucutre</span></a>
					</li>
					<li>
						<a href="#font-family"><i class="fas fa-flag"></i><span>Font Family</span></a>
					</li>
					<li>
						<a href="#SCSS"><i class="ti-css3"></i><span>SCSS</span></a>
					</li>
					<li>
						<a href="#icons"><i class="ti-layout-width-full"></i><span>Icons</span></a>
					</li>
					<li>
						<a href="#support"><i class="ti-settings"></i><span>Help & Support</span></a>
					</li>
				</ul>
			</div>
		</div>
		<!-- Main Page Wrapper -->
		<div class="page-wrapper">
			<!-- Page header -->
			<div class="page-hdr p-4">
				<div class="row align-items-center">
					<div class="col-6 page-hdr-left">
						<div class="mobile-logo">
							<a href="#"><img src="images/logo.png" alt=""></a>
						</div>
					</div>
					<div class="col-6 page-hdr-right">
						<div class="page-hdr-mobile">
							<div class="page-menu open-left-menu">
								<a href="#"><i class="icon-menu"></i></a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="page-title">
				<div class="row align-items-center">
					<div class="col-sm-6">
						<h2 class="page-title-text">Documentation</h2>
					</div>
					<div class="col-sm-6 text-right">
						<div class="breadcrumbs">
							<ul>
								<li><a href="#">Home</a></li>
								<li>Documentation</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="page-body">
				<div class="row">
					<div class="col-12">
						<div id="introduction" class="panel panel-default">
							<div class="panel-head">
								<div class="panel-title">
									<span class="panel-title-text">Introduction</span>
								</div>
							</div>
							<div class="panel-body">
								<p>Thank you for purchasing our Apez template. If you have any questions that are beyond the scope of this help file, please feel free to contact us here pepdev or mail us at support@pepdev.com.</p>
								<p>Apez is a beautiful open source Web template for bsuiness, admin dashboards and control panels. Apez is fully responsive and mobile friendly HTML template, which is based on the CSS framework Bootstrap 4.x. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design. You can use Apez admin as a better way to present and promote your business. This documentation will guide you through customizing the template.</p>
								<ul>
									<li>Author : <a href="http://pepdev.com/" class="text-primary">Pepdev</a></li>
									<li>Contact : <a class="text-primary">pepdevofficial@gmail.com</a></li>
								</ul>
								<p>Support does include:</p>
								<ul>
									<li class="text-dark">Availability of the author to answer questions</li>
									<li class="text-dark">Answering technical questions about item’s features</li>
									<li class="text-dark">Assistance with reported bugs and issues</li>
								</ul>
								<p>Support does not include:</p>
								<ul>
									<li class="text-danger">Custmaization Work</li>
									<li class="text-danger">Any Installation Work</li>
									<li class="text-danger">Support for any Third Party Plugins / Software</li>
									<li class="text-danger">Solve bug in your implemented template</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-12">
						<div id="installation" class="panel panel-default">
							<div class="panel-head">
								<div class="panel-title">
									<span class="panel-title-text">Installation</span>
								</div>
							</div>
							<div class="panel-body">
								<p>This is the simple static HTML template so no need any headech to install it.</p>
								<p>Unzip package in an empty directory and you will see template folder. In template folder change content according to yours then upload this folder on server root directory.</p>
								<p>This demo will run either on localhost or server</p>
								<ul>
									<li>If you are using XAMPP, place your theme folder inside <code>htdocs/</code> directory.</li>
									<li>If you are using WAMP, place your theme folder inside <code>www/</code> directory.</li>
									<li>you are using LIVE SERVER, place your theme folder inside <code>public_html/</code> directory.</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-12">
						<div id="general-information" class="panel panel-default">
							<div class="panel-head">
								<div class="panel-title">
									<span class="panel-title-text">General Information</span>
								</div>
							</div>
							<div class="panel-body">
								<h4>Software requirements</h4>
								<ul>
									<li><a href="https://www.sublimetext.com/3" class="text-primary">Sublime Text 3</a> used to edit the .HTML, .JS, .CSS and .SCSS files</li>
									<li><a href="http://koala-app.com/" class="text-primary">Koala</a> used as precompiler for SCSS to CSS convert.</li>
								</ul>
								<p class="mb-4">Apez comes with a flexible file structure that can be easily used for small to large scope projects. </p>
								<h4>The following scheme displays the template files structure.</h4>
								<ul class="style-none">
									<li class="text-black mb-2"><i class="fa fa-folder text-light font-18 mr-2"></i> Documentation - <small class="text-primary">contains documentation of template cusotmisation and support</small></li>
									<li class="text-black mb-2"><i class="fa fa-folder text-light font-18 mr-2"></i> License - <small class="text-primary">contains License file of template</small></li>
									<li class="text-black mb-2">
										<i class="fa fa-folder text-light font-18 mr-2"></i> Template - <small class="text-primary">contains the main files of the template. which will be uploaded on server.</small>
										<ul class="style-none mt-2">
											<li class="text-black mb-2"> 
												<i class="fa fa-folder text-light font-18 mr-2"></i> Admin - <small>Contains Admin Template files</small>
												<ul class="style-none mt-2">
													<li class="text-black mb-2"><i class="far fa-folder text-light text-light font-18 mr-2"></i> assets - <small class="text-primary">contains all third party plugin and library and Icons</small></li>
													<li class="text-black mb-2"><i class="far fa-folder text-light text-light font-18 mr-2"></i> dist - <small class="text-primary">contains custom stylesheets and scripts. Used for apez template</small></li>
													<li class="text-black mb-2"><i class="far fa-folder text-light text-light font-18 mr-2"></i> images - <small class="text-primary">contains all images files</small></li>
													<li class="text-black mb-2"><i class="far fa-folder text-light text-light font-18 mr-2"></i> uploads - <small class="text-primary">contains all uploaded files like images, pdf etc</small></li>
													<li class="text-black mb-2"><i class="icon-doc text-light text-light font-18 mr-2"></i> index.html</li>
													<li class="text-black mb-2"><i class="icon-doc text-light text-light font-18 mr-2"></i> other html files</li>
												</ul>
											</li>
											<li class="text-black"> 
												<i class="fa fa-folder text-light font-18 mr-2"></i> Website Template - <small>Contains Website Template files</small>
												<ul class="style-none mt-2">
													<li class="text-black mb-2"><i class="far fa-folder text-light text-light font-18 mr-2"></i> assets - <small class="text-primary">contains all third party plugin and library and Icons</small></li>
													<li class="text-black mb-2"><i class="far fa-folder text-light text-light font-18 mr-2"></i> dist - <small class="text-primary">contains custom stylesheets and scripts. Used for apez template</small></li>
													<li class="text-black mb-2"><i class="far fa-folder text-light text-light font-18 mr-2"></i> images - <small class="text-primary">contains all images files</small></li>
													<li class="text-black mb-2"><i class="far fa-folder text-light text-light font-18 mr-2"></i> inc - <small class="text-primary">contains php file for contact form</small></li>
													<li class="text-black mb-2"><i class="far fa-folder text-light text-light font-18 mr-2"></i> uploads - <small class="text-primary">contains all uploaded files like images, pdf etc</small></li>
													<li class="text-black mb-2"><i class="icon-doc text-light text-light font-18 mr-2"></i> index.html</li>
													<li class="text-black"><i class="icon-doc text-light text-light font-18 mr-2"></i> other html files</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-12">
						<div id="file-strucutre" class="panel panel-default">
							<div class="panel-head">
								<div class="panel-title">
									<span class="panel-title-text">File Strucutre</span>
								</div>
							</div>
							<div class="panel-body">
								<h4>HTML file Structure</h4>
								<p>This template has a responsive layout. below is smaple code of HTML</p>
								<pre class="language-markup mb-5">
									<code>
										&lt;!DOCTYPE html>
										&lt;html lang="en">
										&lt;head>
										&lt;meta charset="UTF-8">
										&lt;meta http-equiv="X-UA-Compatible" content="IE=edge">
										&lt;meta name="viewport" content="width=device-width, initial-scale=1">
										&lt;title>Apez | User Panel</title>
										&lt;link rel="icon" type="image/x-icon" href="images/favicon.png">
										&lt;!-- Switcher CSS -->
										&lt;link rel="stylesheet" href="assets/plugin/switchery/switchery.min.css" />
										&lt;!-- Custom Stylesheet -->
										&lt;link rel="stylesheet" href="dist/css/style.css" />
										&lt;!-- Include js files -->
										&lt;/head>
									</code>
								</pre>
								<h4>CSS file Structure</h4>
								<p>any styles need to be changed just replace it with the wanted styles in the respective block in your style.scss.</p>
								<pre class="language-css">
									<code>
										
										.h-200 
										{
											max-height: 200px;
											position: relative;
											overflow-y: auto;
										}
										.h-250 
										{
											max-height: 250px;
											position: relative;
											overflow-y: auto;
										}
										.h-300 
										{
											max-height: 300px;
											position: relative;
											overflow-y: auto;
										}
										.h-350 
										{
											max-height: 350px;
											position: relative;
											overflow-y: auto;
										}
										.h-400 
										{
											max-height: 400px;
											position: relative;
											overflow-y: auto;
										}
										.h-500 
										{
											max-height: 500px;
											position: relative;
											overflow-y: auto;
										}
										.h-600 
										{
											max-height: 600px;
											position: relative;
											overflow-y: auto;
										}
									</code>
								</pre>
								<h4>JS file Structure</h4>
								<p> This template has dynamic animations, which have been implemented in JavaScript. The JS file is custom.js.</p>
								<pre class="language-javascript">
									<code>
										//*************************************************
										//Sidebar menu  ***********************************
										//*************************************************
										$('body').on('click', '.open-sidebar-right', function () 
										{
											var ele = $(this);
											$('body').css('overflow', 'hidden');
											$('body').append('<div class="overlay"></div>');
											setTimeout(function(){ $('.sidebar-right').css('right', '0'); }, 50);
										});

										$('body').on('click', '.sidebar-close, .overlay', function () 
										{
											$('body').css('overflow', 'visible');
											$('.sidebar-right').css('right', '-450px');
											setTimeout(function(){ $('.overlay').remove(); }, 200);
										})

										//*************************************************
										//Left Side menu  *********************************
										//*************************************************
										$('body').on('click', '.menu-close', function () 
										{
											var ele = $(this);
											$('#main-wrapper').addClass('page-menu-small');
											ele.find('i').removeClass('fa-hand-point-left');
											ele.find('i').addClass('fa-hand-point-right');
											ele.removeClass('menu-close');
											ele.addClass('menu-open');
										});

										$('body').on('click', '.menu-open', function () 
										{
											var ele = $(this);
											$('#main-wrapper').removeClass('page-menu-small');
											ele.find('i').removeClass('fa-hand-point-right');
											ele.find('i').addClass('fa-hand-point-left');
											ele.removeClass('menu-open');
											ele.addClass('menu-close');
										});
									</code>
								</pre>
							</div>
						</div>
					</div>
					<div class="col-12">
						<div id="font-family" class="panel panel-default">
							<div class="panel-head">
								<div class="panel-title">
									<span class="panel-title-text">Font Family</span>
								</div>
							</div>
							<div class="panel-body">
								<p>We have used google fonts for the template you can change whatever font you wish</p>
								<pre class="language-css">
									<code>
										@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500');
										@import url('https://fonts.googleapis.com/css?family=Dosis:500,700');

										$font: 'Poppins', sans-serif;
										$fontHeading: "Dosis", 'Poppins', sans-serif;
									</code>
								</pre>
							</div>
						</div>
					</div>
					<div class="col-12">
						<div id="SCSS" class="panel panel-default">
							<div class="panel-head">
								<div class="panel-title">
									<span class="panel-title-text">SCSS</span>
								</div>
							</div>
							<div class="panel-body">
								<p>Apez Admin Template is based on scss and we import all the file into style.css you can simply edit any scss and compile it. We have used koala compiler for compile.</p>
								<pre class="language-css">
									<code>
										/************************************************
										[ ICON CSS START ] ******************************
										*************************************************/
										@import '../../assets/icons/font-awesome/css/fontawesome-all.min.css';
										@import '../../assets/icons/simple-line-icons/css/simple-line-icons.min.css';
										@import '../../assets/icons/themify/css/themify-icons.css';
										@import '../../assets/icons/weather-icons/css/weather-icons.min.css';

										/************************************************
										[ BOOTSTRAP START ] *****************************
										*************************************************/
										@import "bootstrap/bootstrap.scss";

										/************************************************
										[ BASIC CSS START ] *****************************
										*************************************************/
										@import "_variable.scss";

										/************************************************
										[ SHORTCODES CSS START ] ************************
										*************************************************/
										@import "_shortcodes.scss";

										/************************************************
										[ TYPOGRAPHY CSS START ] ************************
										*************************************************/
										@import "_typography.scss";

										/************************************************
										[ TYPOGRAPHY CSS START ] ************************
										*************************************************/
										@import "_calendar.scss";
									</code>
								</pre>
							</div>
						</div>
					</div>
					<div class="col-12">
						<div id="reference-file" class="panel panel-default">
							<div class="panel-head">
								<div class="panel-title">
									<span class="panel-title-text">Reference File</span>
								</div>
							</div>
							<div class="panel-body">
								<p>In this template jQuery libraries and plugins have been used for dynamic animation.</p>
								<ul>
									<li>jQuery (jquery-3.3.1.min.js)</li>
									<li>Bootstrap (bootstrap.min.js)</li>
									<li>Chartjs (Chart.min.js)</li>
									<li>Datatable (datatables.min.js)</li>
									<li>Dropzone (dropzone.min.js)</li>
									<li>Fullcalendar (fullcalendar.min.js)</li>
									<li>jQuery UI (jquery-ui.min)</li>
									<li>knob Chart (jquery.knob.min.js)</li>
									<li>Mask (jquery.mask.min.js)</li>
									<li>Material (material.min.js)</li>
									<li>Moment (moment.min.js)</li>
									<li>Morris (morris.min.js)</li>
									<li>Popper (popper.min.js)</li>
									<li>Raphael (raphael.min.js)</li>
									<li>Sparkline (jquery.sparkline.min.min.js)</li>
									<li>Summernote (summernote-bs4.min.js)</li>
									<li>Sweetalert (sweetalert.js)</li>
									<li>Switchery (switchery.min.js)</li>
									<li>Tippy (tippy.all.min.js)</li>
									<li>Toastr (toastr.min.js)</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-12">
						<div id="icons" class="panel panel-default">
							<div class="panel-head">
								<div class="panel-title">
									<span class="panel-title-text">Icons</span>
								</div>
							</div>
							<div class="panel-body">
								<p>We have used multiple icons. Below is list of all icons</p>
								<div class="table-responsive">
									<table class="table table-bordered">
										<tbody>
											<tr>
												<td>Fontawesome</td>
												<td><code>far fa-folder</code></td>
												<td><a href="https://fontawesome.com/icons?d=gallery" class="text-primary">Official Page</a></td>
											</tr>
											<tr>
												<td>Simple Line Icons</td>
												<td><code>icon-user</code></td>
												<td><a href="http://simplelineicons.com/" class="text-primary">Official Page</a></td>
											</tr>
											<tr>
												<td>Themify Icons</td>
												<td><code>ti-angle-double-left</code></td>
												<td><a href="https://themify.me/themify-icons" class="text-primary">Official Page</a></td>
											</tr>
											<tr>
												<td>Weather Icons</td>
												<td><code>wi wi-cloudy</code></td>
												<td><a href="http://erikflowers.github.io/weather-icons/" class="text-primary">Official Page</a></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<div class="col-12">
						<div id="support" class="panel panel-default">
							<div class="panel-head">
								<div class="panel-title">
									<span class="panel-title-text">Help & Support</span>
								</div>
							</div>
							<div class="panel-body">
								<p>24/7 Support, Just mail us any issue we will be happpy to help.</p>
								<p>For any issue create ticket by clicking here <a class="text-primary" href="http://support.pepdev.com">support</a></p>
								<p>Or you can email us.</p>
								<p>Email - <b>support@pepdev.com</b></p>
								<p>Thank you for purchasing Apez template . If you have any question that is beyond the scope of this documentation, Please feel free to create a support ticket using Our Support Site or send an email to support@pepdev.com.</p>
							</div>
						</div>
					</div>
					<div class="col-12">
						<div class="panel panel-default">
							<div class="panel-body text-center">
								<p class="font-36 text-success font-500 m-0">Thank you</p>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>


	<!-- Include js files -->
	<!-- jQuery Library -->
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<!-- Popper Plugin -->
	<script type="text/javascript" src="js/popper.min.js"></script>
	<!-- Bootstrap Framework -->
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<!-- prism Plugin -->
	<script type="text/javascript" src="js/prism.js"></script>
	<!-- scrolltofixed Plugin -->
	<script type="text/javascript" src="js/jquery-scrolltofixed-min.js"></script>
	<!-- scrolltofixed Plugin -->
	<script type="text/javascript" src="js/jquery.scrollTo.min.js"></script>
	<!-- Toastr Plugin -->
	<script type="text/javascript" src="js/custom.js"></script>

</body>
</html>